<template>
  <div class="notice-box">
    <div class="notice-nav">
      <div class="notice-nav-title">消息中心</div>
      <ul class="notice-nav-list">
        <li v-for="(item,index) in randOptions" :key="index" @click="change(item,index)"  :class='{ active:index===number,unread:item.count}'>
          <el-badge :value="item.count" class="item" v-if="item.count">
            {{item.name}}
          </el-badge>
          <span v-else>{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div class="notice-con-box">
      <div class="notice-con-title-box" :class="{isUnreadStyle:messageTag!=='未读消息'}">
        <div class="notice-con-title">
          {{messageTag}}
        </div>
        <el-input style="width:360px" size="large"   v-model="input" placeholder="请输入内容" @keyup.enter.native="searchNotice" :class="{isUnreadSearchStyle:messageTag!=='未读消息'}">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="notice-con-titBtn" v-if="messageTag==='未读消息'" @click="allReadState">
          全部已读
        </div> 
      </div>
      <ul class="notice-con-type">
        <li v-for="(item,index) in typeOpitions" :key="index" :class='{ active1:index===selectType}' @click="changeNoticeType(item,index)">{{item.name}}</li>
      </ul>
      <div class="notice-con">
        <table class="notice-con-list">
          <thead>
            <tr>
              <th width="3%">头像</th>
              <th width="9%">姓名</th>
              <th width="72%">标题</th>
              <th width="12%">时间</th>
              <th width="4%">查看</th>
            </tr>
          </thead>
          <tbody v-if="tableData.length!==0">
            <tr v-for="(item,index) in tableData" :key="index">
              <td align="center">
                <img :src="item.USERPHOTO" alt="" class="header_img" style="display:block;width:32px;height:32px;margin:10px 0px;border-radius: 50%;" v-if="item.havePhoto">
              </td>
              <td align="center">{{item.USERNAME}}</td>
              <td align="left" :class="{isUnread:messageTag==='未读消息'}">{{item.NOTIFYCONTENT?item.NOTIFYCONTENT.indexOf('taskInstId')!==-1?JSON.parse(item.NOTIFYCONTENT).title: item.NOTIFYCONTENT:''}}</td>
              <td align="center">{{item.CREATETIME}}</td>
              <td align="center" @click="noticeDetail(item)" style="white-space:nowrap;">查看详情</td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr style="width:100%;height:200px;">
              <td style="width:100%;text-align:center;" colspan="5">
                <i class="el-icon-warning-outline" style="color: #0099cc"></i>
                您好，还没有消息哦！
              </td>

            </tr>
            </tbody>
        </table>
      </div>
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalNum">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      pageSize:20,
      totalNum:null,
      readed:'all',
      input: "",
      currentPage:1,
      number:0,
      randOptions:[
        {name:'全部消息'},
        {name:'未读消息',count:null},
        {name:'已读消息'},
        {name:'系统消息'}
      ],
      messageTag:'全部消息',
      typeOpitions:[
        {name:'全部类型消息'},
        {name:'安全消息'},
        {name:'服务消息'},
        {name:'历史消息'},
      ],
      selectType:0,
      tableData: [
        {
          // photo:'iVBORw0KGgoAAAANSUhEUgAAAEAAAAA8CAMAAADhV0xWAAADAFBMVEX+/v4AAAD9/f36+/r19vXu7/D8/PwzO2g2P3FBSXIbKn/q6uqaprgaI2deaJe9u790e5Npc5wiLGr////+/v4dLYn////+/v7+/v79/f25rrUjLF7l5OIlNqQaIVlla4ji3d2wudnP1NyJlcEUG1AiMYRNVn3+/v64uszF0+b+/v4sNWNRYZciL3i0t8DV1NqSkaOtqLmxrcVWY57c2du/vs7l6u5QVnhKWIW2tq5VWoq7xd/AyNyin71ZX4E9SYiXmqtgcKvZysccIUjhz88iMZYrMmuAgqDIy9DZ1NAtMlGRoMJaZI8iMowsOYyclZw2QHqjtM1faH4sOnTS3OSPhIexrKWnr9bg4+hSYoOqn6fEvsGFjqYRF0XDxM48R3p9j7cQFDswQ8o6QFwkK1ShqMVue6B4bnlVZbEyQJNFUX6ck5TG0NU1QoShl6TPyMsLDSKgmos7TKr///85TLj+/v6hm6zPy8EfM61XZ8dscYQhJj47R3CrqJp6h52PiZgwRKBKUWystsxNUVxnc4vN2ezHycItNlw/RGaSmLRdbIunrr9IU3Znbp6Jlqptb5D9/f2loq9fcbtGR1lcZGfUnp9pesc8QkxGVK9JWJgNEi0vQq2DjtPDuriGgIuUkId2fa0nObE2TsJ/dYleZ6GYh5A3N0Teen1PXax0hMpvaWOtpMJ1g6ORjLbeUFPV3u2DenHHwrqHhXkkOL9/lMx6h6/fHidpdrBzgb1mZnJMXcqLnM6WmMWPnbFKXLYrQbqdqdG9GxsXHFK0FReantdBVtI9TJy5sZ7Awq5ictPXjpDrvb6uq6tLS02Ahrt9j6iowMcQHFgrQcrQrq8lM3ogMZVJWpbQFhrChYWJktzvsrPJXmCRmL4kKWeDiqQfIDK/KS7lQUd+gtiDmJhohptPV4fL0dMiPb4mNnS3TE3Pz8/m6eg+RnF4h6fhKjURH2OkloFQYN9ieMtYYIcYLJwdL6oYHGRfZo/jZWgYIGgYMI/qp6jIChAaKXjJW14XHVZT0157AAABAHRSTlP/AP////9L/////v//////////EXn/IML1qP/////////////////K//+0////////////////////////////////////////////////////////////////////////////////////////////////ZP/k//////////////////////////////////+X/////////////////////////////////////////////////////////////////xP////////////////8/7W6/xSgwv//////scb/////////ZJdLyv8QucKX/0v/IHUgS8J1S/8gIP//ZP/KOWvPXQAAB/1JREFUeJyll3dUWnkWxxl8CAgC1iigAopKFLAgKih2REXFXrD3bmLsvSWxO7bYNRpNNGomzRgTJ5pNm7SZTJ85O5Op23dns73M7uw+RB3fA2dyztzDn7/vh/vu/d3yQ7zyE+0AgJ6mvrFVmRFi24zKrIz1NfVeHmCof0iphNohfcOXAmgeVqdW2mHNHwVoqv3zfW7AEVCAofEPyxVmDP0QCODYTtR+2IyOHQR49WXkCntVLUAPEjykBmhI0BDgT8UOf5/TPYCe1f4TgPejjz4a8gUAFAByVAlWe4RdAEz/+MLtO7cvPAZQDImEi8PhADhlj7ALgPrv+88vrn2zre+JQzvX95r1MVAwxGEoABo/4Ny1D29f8AVQBSQKO8QjIq/VGVuOA6CEnUgqAceg/uG++M+d72gAv4Ckq20qnsvKsxFLEzyJgAbklDKb2wBDWP5p39z5jeL/E7pMZd3hApdRQjcBq9tGhvpgtH2jtgHw++d97fN3UfykVg+dZf/wwLam8C4bioWFRZcEGgfjXYAmTI9898OfU1GScAvZsqVPzWc1gYE+qakWutLudiqUoKgLBQBeP8ihz4f4BWY+qWiBaaJPzZEjR8YysJaEOY9aEgoCOKQEwB1AIB9958sg+aCdCaLURFnGWM1n6ZZmUixFWxsjgWYCdAEEqNS/xrlzuM70dE+8I0Em6kCjM9pEgjwMxccnea4TmgjwMiBeMYTrQcAQjtM6kK5b2G0rQwc2oTss0SfRGJml/2onAD1qCAL0VQDIR9/S1n0SU8fQAm1tdgS6tjYZg7YknNaRutTDAPogQLUFIYe+pQ6CkUvENI3VoGViDBbrotOtQ5CJdeuhnwCGEaGnokcgvR9TpRapY0fSnWtaqtuwzssEHR1CrTiDUtgDA4BylRyAMcDhInW0tU0T083C1weHB8yyCB1YdEYGhqDDgZe2JkI1BAiwC0TiI3TRYoFZy/Dw2bPhzrW1JwNPOvc+7+HBAfoINW1UAxUbS2yjtGG7w88+bRl42tIy0CaVduj06njCKhK8zghII9mJAQAA0cOBpJUV0tPzl9fPX7z8VYJnu+fzajNYMYBmhShTBSickK9Xcxw2VqVZr2fPk+UcfLtnQ2hoA1WlQZYh1HdyJDW0uvp8Q7v/9dXs/HhXV1Bu11duDy0FhR00CJDUqcHB9dDQi1F2U1Evok+4PiGTrZsZ6vrrAQDc9OB6dlH8iweu+VF1lyoqiouLJUlJ6gAH+AA8mSI6xTg8qTgxXyQPCOBxeVwnTrEqwOiAICI0Yjnl/ltODC5xftKbJuHxfIuJHJzqkClTl0blZKK92d1JPkFcyidfesPV29u3WM4DRxX8nJW6i6QkoIrM3JfsKy7V5R+te8Pbl8bjw+tAYcbqrvLOR/CITkRXHk0e/aAigIoCVIbTtumrK6ZdF9yEbhIajZEk51Jx4IxUm0JNdeW8o+/sXSIS5cR4or21pNiXCmslO6anrqEo64HT1FQUerHuSSiZHD85KQ9QqSOFgQ1FTUtT5ADFsBue6os6/+JBfHTFg0uTchp8um6boqWpNFWkBsBn4FtFgdnxDdNHK8iTPFpAsRMjkq+Io2Ll2GeKpgpr60ikRqR1VqvzyQyfgSJ7cjQxfpKHwyV1Zlq7sRixfAXj+8PbbR0yWEA5ik9fDnHpQlMyBorioy5nZ+eXE6lJdqQEPN3a2jqSvz8fysGyF0bQdxQqFvynhEJbFwwG49xXdPFyVNTR6boA7vOsHnwzvrPz2bNnBdzdvWdntO26gNTgC+lC4Wm3SDuKpYvHqIegvDwqv2F+evpoNNF/OSwoiFRP+uqtr7/uSChQRnR3uCrGO+g7ELm4FsNyW22mr4nj8pKzevzd3fvkTg5kV1dXThg+LCiltVXU2hEe55LnUs8AP2RvvG8vGBq4MPNbp4SRkRsbXrkhjjLdZEv/Ai4Nh4rlSpxigsxPC+LiRCLLrq4uLBodETHaDOxbMMAVB0ldcex57nacdTxmjqnFdCxhRiT3OtiHkmk4Lsfd/PRcMqYW2ySyxGJrMWIKxVQ3j7tvxQGXLADv4RiWKYzZuBuzWGritzAyOzvi5VB+Zt7evq/hzJlegkeuh21WuwBtYyMWU3TFya2/hK55v5NG2OLDWEKWMObW+Phsv4wdUvKQvmRXtFTeMHWmVzDn5XXqaoq5i40NhWKTR8JnfgLbE3/7QbAtvpn12nH63RtpmzM594O1mLmZDg5ObmAkV9a8VlPMzRdzFu4XYkX++PYs7Kc/g6+67/3a9vUY1mus5uulm5uz/SUmJibjQXQna/qSw1JmSsr1qzmjHvcds9q3JmzRFNP/7er3LdvvfdBDF7KO03O1ghtLFYCZ2Zsfm6+4bziY9/ffGvW6JV0Outk/0jhuYqD99p4esu7/wXxLyApiahkYBDs2msxs3ru5eOrLuxMf32gsWVgL2rq+cD+Ercs2CPZ7f58I8uD4xVv0ZnwIUwtMY66Bn0mpedWNh1erbuSsTUycWsjJZbKZBgYGWlr/3a+BPnn+8gkJ3G5BwFxusJ9fY4pX/82tqxNfVt1L2xwfGfHz8zPQMnj/3xAJ/NH1j9+DK6kpm1DIZgbnpgSlvLlYVVI6U3nlSlpa1bhJZeXf/goTqD77/vg2SBDZmIL7laNjCLOQGRziV1k5cyXt3sO0d36lclzdw/Nff/9UQElMTLQAIdoRbC02GwxI5ZV3/vwnNYf/DwokL0uvRy+kAAAAAElFTkSuQmCC',
          photo:'http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F06%2F20200506110929_iajqi.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631844875&t=5685959586a38feada19ce4329b4b3aa',
          name: '王小虎',
          noticeTitle: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02',
          checkBtn:'查看详情',
        },
        {
          // photo:'iVBORw0KGgoAAAANSUhEUgAAAEAAAAA8CAMAAADhV0xWAAADAFBMVEX+/v4AAAD9/f36+/r19vXu7/D8/PwzO2g2P3FBSXIbKn/q6uqaprgaI2deaJe9u790e5Npc5wiLGr////+/v4dLYn////+/v7+/v79/f25rrUjLF7l5OIlNqQaIVlla4ji3d2wudnP1NyJlcEUG1AiMYRNVn3+/v64uszF0+b+/v4sNWNRYZciL3i0t8DV1NqSkaOtqLmxrcVWY57c2du/vs7l6u5QVnhKWIW2tq5VWoq7xd/AyNyin71ZX4E9SYiXmqtgcKvZysccIUjhz88iMZYrMmuAgqDIy9DZ1NAtMlGRoMJaZI8iMowsOYyclZw2QHqjtM1faH4sOnTS3OSPhIexrKWnr9bg4+hSYoOqn6fEvsGFjqYRF0XDxM48R3p9j7cQFDswQ8o6QFwkK1ShqMVue6B4bnlVZbEyQJNFUX6ck5TG0NU1QoShl6TPyMsLDSKgmos7TKr///85TLj+/v6hm6zPy8EfM61XZ8dscYQhJj47R3CrqJp6h52PiZgwRKBKUWystsxNUVxnc4vN2ezHycItNlw/RGaSmLRdbIunrr9IU3Znbp6Jlqptb5D9/f2loq9fcbtGR1lcZGfUnp9pesc8QkxGVK9JWJgNEi0vQq2DjtPDuriGgIuUkId2fa0nObE2TsJ/dYleZ6GYh5A3N0Teen1PXax0hMpvaWOtpMJ1g6ORjLbeUFPV3u2DenHHwrqHhXkkOL9/lMx6h6/fHidpdrBzgb1mZnJMXcqLnM6WmMWPnbFKXLYrQbqdqdG9GxsXHFK0FReantdBVtI9TJy5sZ7Awq5ictPXjpDrvb6uq6tLS02Ahrt9j6iowMcQHFgrQcrQrq8lM3ogMZVJWpbQFhrChYWJktzvsrPJXmCRmL4kKWeDiqQfIDK/KS7lQUd+gtiDmJhohptPV4fL0dMiPb4mNnS3TE3Pz8/m6eg+RnF4h6fhKjURH2OkloFQYN9ieMtYYIcYLJwdL6oYHGRfZo/jZWgYIGgYMI/qp6jIChAaKXjJW14XHVZT0157AAABAHRSTlP/AP////9L/////v//////////EXn/IML1qP/////////////////K//+0////////////////////////////////////////////////////////////////////////////////////////////////ZP/k//////////////////////////////////+X/////////////////////////////////////////////////////////////////xP////////////////8/7W6/xSgwv//////scb/////////ZJdLyv8QucKX/0v/IHUgS8J1S/8gIP//ZP/KOWvPXQAAB/1JREFUeJyll3dUWnkWxxl8CAgC1iigAopKFLAgKih2REXFXrD3bmLsvSWxO7bYNRpNNGomzRgTJ5pNm7SZTJ85O5Op23dns73M7uw+RB3fA2dyztzDn7/vh/vu/d3yQ7zyE+0AgJ6mvrFVmRFi24zKrIz1NfVeHmCof0iphNohfcOXAmgeVqdW2mHNHwVoqv3zfW7AEVCAofEPyxVmDP0QCODYTtR+2IyOHQR49WXkCntVLUAPEjykBmhI0BDgT8UOf5/TPYCe1f4TgPejjz4a8gUAFAByVAlWe4RdAEz/+MLtO7cvPAZQDImEi8PhADhlj7ALgPrv+88vrn2zre+JQzvX95r1MVAwxGEoABo/4Ny1D29f8AVQBSQKO8QjIq/VGVuOA6CEnUgqAceg/uG++M+d72gAv4Ckq20qnsvKsxFLEzyJgAbklDKb2wBDWP5p39z5jeL/E7pMZd3hApdRQjcBq9tGhvpgtH2jtgHw++d97fN3UfykVg+dZf/wwLam8C4bioWFRZcEGgfjXYAmTI9898OfU1GScAvZsqVPzWc1gYE+qakWutLudiqUoKgLBQBeP8ihz4f4BWY+qWiBaaJPzZEjR8YysJaEOY9aEgoCOKQEwB1AIB9958sg+aCdCaLURFnGWM1n6ZZmUixFWxsjgWYCdAEEqNS/xrlzuM70dE+8I0Em6kCjM9pEgjwMxccnea4TmgjwMiBeMYTrQcAQjtM6kK5b2G0rQwc2oTss0SfRGJml/2onAD1qCAL0VQDIR9/S1n0SU8fQAm1tdgS6tjYZg7YknNaRutTDAPogQLUFIYe+pQ6CkUvENI3VoGViDBbrotOtQ5CJdeuhnwCGEaGnokcgvR9TpRapY0fSnWtaqtuwzssEHR1CrTiDUtgDA4BylRyAMcDhInW0tU0T083C1weHB8yyCB1YdEYGhqDDgZe2JkI1BAiwC0TiI3TRYoFZy/Dw2bPhzrW1JwNPOvc+7+HBAfoINW1UAxUbS2yjtGG7w88+bRl42tIy0CaVduj06njCKhK8zghII9mJAQAA0cOBpJUV0tPzl9fPX7z8VYJnu+fzajNYMYBmhShTBSickK9Xcxw2VqVZr2fPk+UcfLtnQ2hoA1WlQZYh1HdyJDW0uvp8Q7v/9dXs/HhXV1Bu11duDy0FhR00CJDUqcHB9dDQi1F2U1Evok+4PiGTrZsZ6vrrAQDc9OB6dlH8iweu+VF1lyoqiouLJUlJ6gAH+AA8mSI6xTg8qTgxXyQPCOBxeVwnTrEqwOiAICI0Yjnl/ltODC5xftKbJuHxfIuJHJzqkClTl0blZKK92d1JPkFcyidfesPV29u3WM4DRxX8nJW6i6QkoIrM3JfsKy7V5R+te8Pbl8bjw+tAYcbqrvLOR/CITkRXHk0e/aAigIoCVIbTtumrK6ZdF9yEbhIajZEk51Jx4IxUm0JNdeW8o+/sXSIS5cR4or21pNiXCmslO6anrqEo64HT1FQUerHuSSiZHD85KQ9QqSOFgQ1FTUtT5ADFsBue6os6/+JBfHTFg0uTchp8um6boqWpNFWkBsBn4FtFgdnxDdNHK8iTPFpAsRMjkq+Io2Ll2GeKpgpr60ikRqR1VqvzyQyfgSJ7cjQxfpKHwyV1Zlq7sRixfAXj+8PbbR0yWEA5ik9fDnHpQlMyBorioy5nZ+eXE6lJdqQEPN3a2jqSvz8fysGyF0bQdxQqFvynhEJbFwwG49xXdPFyVNTR6boA7vOsHnwzvrPz2bNnBdzdvWdntO26gNTgC+lC4Wm3SDuKpYvHqIegvDwqv2F+evpoNNF/OSwoiFRP+uqtr7/uSChQRnR3uCrGO+g7ELm4FsNyW22mr4nj8pKzevzd3fvkTg5kV1dXThg+LCiltVXU2hEe55LnUs8AP2RvvG8vGBq4MPNbp4SRkRsbXrkhjjLdZEv/Ai4Nh4rlSpxigsxPC+LiRCLLrq4uLBodETHaDOxbMMAVB0ldcex57nacdTxmjqnFdCxhRiT3OtiHkmk4Lsfd/PRcMqYW2ySyxGJrMWIKxVQ3j7tvxQGXLADv4RiWKYzZuBuzWGritzAyOzvi5VB+Zt7evq/hzJlegkeuh21WuwBtYyMWU3TFya2/hK55v5NG2OLDWEKWMObW+Phsv4wdUvKQvmRXtFTeMHWmVzDn5XXqaoq5i40NhWKTR8JnfgLbE3/7QbAtvpn12nH63RtpmzM594O1mLmZDg5ObmAkV9a8VlPMzRdzFu4XYkX++PYs7Kc/g6+67/3a9vUY1mus5uulm5uz/SUmJibjQXQna/qSw1JmSsr1qzmjHvcds9q3JmzRFNP/7er3LdvvfdBDF7KO03O1ghtLFYCZ2Zsfm6+4bziY9/ffGvW6JV0Outk/0jhuYqD99p4esu7/wXxLyApiahkYBDs2msxs3ru5eOrLuxMf32gsWVgL2rq+cD+Ercs2CPZ7f58I8uD4xVv0ZnwIUwtMY66Bn0mpedWNh1erbuSsTUycWsjJZbKZBgYGWlr/3a+BPnn+8gkJ3G5BwFxusJ9fY4pX/82tqxNfVt1L2xwfGfHz8zPQMnj/3xAJ/NH1j9+DK6kpm1DIZgbnpgSlvLlYVVI6U3nlSlpa1bhJZeXf/goTqD77/vg2SBDZmIL7laNjCLOQGRziV1k5cyXt3sO0d36lclzdw/Nff/9UQElMTLQAIdoRbC02GwxI5ZV3/vwnNYf/DwokL0uvRy+kAAAAAElFTkSuQmCC',
          photo:'http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-b6eae3250bb62fadb3d2527f466cf033_b.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631844280&t=b89bd8a6d5ec115436f9ae96c53511f4',
          name: '王小虎',
          noticeTitle: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02',
          checkBtn:'查看详情',
        },
        {
          // photo:'iVBORw0KGgoAAAANSUhEUgAAAEAAAAA8CAMAAADhV0xWAAADAFBMVEX+/v4AAAD9/f36+/r19vXu7/D8/PwzO2g2P3FBSXIbKn/q6uqaprgaI2deaJe9u790e5Npc5wiLGr////+/v4dLYn////+/v7+/v79/f25rrUjLF7l5OIlNqQaIVlla4ji3d2wudnP1NyJlcEUG1AiMYRNVn3+/v64uszF0+b+/v4sNWNRYZciL3i0t8DV1NqSkaOtqLmxrcVWY57c2du/vs7l6u5QVnhKWIW2tq5VWoq7xd/AyNyin71ZX4E9SYiXmqtgcKvZysccIUjhz88iMZYrMmuAgqDIy9DZ1NAtMlGRoMJaZI8iMowsOYyclZw2QHqjtM1faH4sOnTS3OSPhIexrKWnr9bg4+hSYoOqn6fEvsGFjqYRF0XDxM48R3p9j7cQFDswQ8o6QFwkK1ShqMVue6B4bnlVZbEyQJNFUX6ck5TG0NU1QoShl6TPyMsLDSKgmos7TKr///85TLj+/v6hm6zPy8EfM61XZ8dscYQhJj47R3CrqJp6h52PiZgwRKBKUWystsxNUVxnc4vN2ezHycItNlw/RGaSmLRdbIunrr9IU3Znbp6Jlqptb5D9/f2loq9fcbtGR1lcZGfUnp9pesc8QkxGVK9JWJgNEi0vQq2DjtPDuriGgIuUkId2fa0nObE2TsJ/dYleZ6GYh5A3N0Teen1PXax0hMpvaWOtpMJ1g6ORjLbeUFPV3u2DenHHwrqHhXkkOL9/lMx6h6/fHidpdrBzgb1mZnJMXcqLnM6WmMWPnbFKXLYrQbqdqdG9GxsXHFK0FReantdBVtI9TJy5sZ7Awq5ictPXjpDrvb6uq6tLS02Ahrt9j6iowMcQHFgrQcrQrq8lM3ogMZVJWpbQFhrChYWJktzvsrPJXmCRmL4kKWeDiqQfIDK/KS7lQUd+gtiDmJhohptPV4fL0dMiPb4mNnS3TE3Pz8/m6eg+RnF4h6fhKjURH2OkloFQYN9ieMtYYIcYLJwdL6oYHGRfZo/jZWgYIGgYMI/qp6jIChAaKXjJW14XHVZT0157AAABAHRSTlP/AP////9L/////v//////////EXn/IML1qP/////////////////K//+0////////////////////////////////////////////////////////////////////////////////////////////////ZP/k//////////////////////////////////+X/////////////////////////////////////////////////////////////////xP////////////////8/7W6/xSgwv//////scb/////////ZJdLyv8QucKX/0v/IHUgS8J1S/8gIP//ZP/KOWvPXQAAB/1JREFUeJyll3dUWnkWxxl8CAgC1iigAopKFLAgKih2REXFXrD3bmLsvSWxO7bYNRpNNGomzRgTJ5pNm7SZTJ85O5Op23dns73M7uw+RB3fA2dyztzDn7/vh/vu/d3yQ7zyE+0AgJ6mvrFVmRFi24zKrIz1NfVeHmCof0iphNohfcOXAmgeVqdW2mHNHwVoqv3zfW7AEVCAofEPyxVmDP0QCODYTtR+2IyOHQR49WXkCntVLUAPEjykBmhI0BDgT8UOf5/TPYCe1f4TgPejjz4a8gUAFAByVAlWe4RdAEz/+MLtO7cvPAZQDImEi8PhADhlj7ALgPrv+88vrn2zre+JQzvX95r1MVAwxGEoABo/4Ny1D29f8AVQBSQKO8QjIq/VGVuOA6CEnUgqAceg/uG++M+d72gAv4Ckq20qnsvKsxFLEzyJgAbklDKb2wBDWP5p39z5jeL/E7pMZd3hApdRQjcBq9tGhvpgtH2jtgHw++d97fN3UfykVg+dZf/wwLam8C4bioWFRZcEGgfjXYAmTI9898OfU1GScAvZsqVPzWc1gYE+qakWutLudiqUoKgLBQBeP8ihz4f4BWY+qWiBaaJPzZEjR8YysJaEOY9aEgoCOKQEwB1AIB9958sg+aCdCaLURFnGWM1n6ZZmUixFWxsjgWYCdAEEqNS/xrlzuM70dE+8I0Em6kCjM9pEgjwMxccnea4TmgjwMiBeMYTrQcAQjtM6kK5b2G0rQwc2oTss0SfRGJml/2onAD1qCAL0VQDIR9/S1n0SU8fQAm1tdgS6tjYZg7YknNaRutTDAPogQLUFIYe+pQ6CkUvENI3VoGViDBbrotOtQ5CJdeuhnwCGEaGnokcgvR9TpRapY0fSnWtaqtuwzssEHR1CrTiDUtgDA4BylRyAMcDhInW0tU0T083C1weHB8yyCB1YdEYGhqDDgZe2JkI1BAiwC0TiI3TRYoFZy/Dw2bPhzrW1JwNPOvc+7+HBAfoINW1UAxUbS2yjtGG7w88+bRl42tIy0CaVduj06njCKhK8zghII9mJAQAA0cOBpJUV0tPzl9fPX7z8VYJnu+fzajNYMYBmhShTBSickK9Xcxw2VqVZr2fPk+UcfLtnQ2hoA1WlQZYh1HdyJDW0uvp8Q7v/9dXs/HhXV1Bu11duDy0FhR00CJDUqcHB9dDQi1F2U1Evok+4PiGTrZsZ6vrrAQDc9OB6dlH8iweu+VF1lyoqiouLJUlJ6gAH+AA8mSI6xTg8qTgxXyQPCOBxeVwnTrEqwOiAICI0Yjnl/ltODC5xftKbJuHxfIuJHJzqkClTl0blZKK92d1JPkFcyidfesPV29u3WM4DRxX8nJW6i6QkoIrM3JfsKy7V5R+te8Pbl8bjw+tAYcbqrvLOR/CITkRXHk0e/aAigIoCVIbTtumrK6ZdF9yEbhIajZEk51Jx4IxUm0JNdeW8o+/sXSIS5cR4or21pNiXCmslO6anrqEo64HT1FQUerHuSSiZHD85KQ9QqSOFgQ1FTUtT5ADFsBue6os6/+JBfHTFg0uTchp8um6boqWpNFWkBsBn4FtFgdnxDdNHK8iTPFpAsRMjkq+Io2Ll2GeKpgpr60ikRqR1VqvzyQyfgSJ7cjQxfpKHwyV1Zlq7sRixfAXj+8PbbR0yWEA5ik9fDnHpQlMyBorioy5nZ+eXE6lJdqQEPN3a2jqSvz8fysGyF0bQdxQqFvynhEJbFwwG49xXdPFyVNTR6boA7vOsHnwzvrPz2bNnBdzdvWdntO26gNTgC+lC4Wm3SDuKpYvHqIegvDwqv2F+evpoNNF/OSwoiFRP+uqtr7/uSChQRnR3uCrGO+g7ELm4FsNyW22mr4nj8pKzevzd3fvkTg5kV1dXThg+LCiltVXU2hEe55LnUs8AP2RvvG8vGBq4MPNbp4SRkRsbXrkhjjLdZEv/Ai4Nh4rlSpxigsxPC+LiRCLLrq4uLBodETHaDOxbMMAVB0ldcex57nacdTxmjqnFdCxhRiT3OtiHkmk4Lsfd/PRcMqYW2ySyxGJrMWIKxVQ3j7tvxQGXLADv4RiWKYzZuBuzWGritzAyOzvi5VB+Zt7evq/hzJlegkeuh21WuwBtYyMWU3TFya2/hK55v5NG2OLDWEKWMObW+Phsv4wdUvKQvmRXtFTeMHWmVzDn5XXqaoq5i40NhWKTR8JnfgLbE3/7QbAtvpn12nH63RtpmzM594O1mLmZDg5ObmAkV9a8VlPMzRdzFu4XYkX++PYs7Kc/g6+67/3a9vUY1mus5uulm5uz/SUmJibjQXQna/qSw1JmSsr1qzmjHvcds9q3JmzRFNP/7er3LdvvfdBDF7KO03O1ghtLFYCZ2Zsfm6+4bziY9/ffGvW6JV0Outk/0jhuYqD99p4esu7/wXxLyApiahkYBDs2msxs3ru5eOrLuxMf32gsWVgL2rq+cD+Ercs2CPZ7f58I8uD4xVv0ZnwIUwtMY66Bn0mpedWNh1erbuSsTUycWsjJZbKZBgYGWlr/3a+BPnn+8gkJ3G5BwFxusJ9fY4pX/82tqxNfVt1L2xwfGfHz8zPQMnj/3xAJ/NH1j9+DK6kpm1DIZgbnpgSlvLlYVVI6U3nlSlpa1bhJZeXf/goTqD77/vg2SBDZmIL7laNjCLOQGRziV1k5cyXt3sO0d36lclzdw/Nff/9UQElMTLQAIdoRbC02GwxI5ZV3/vwnNYf/DwokL0uvRy+kAAAAAElFTkSuQmCC',
          photo:'http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-b6eae3250bb62fadb3d2527f466cf033_b.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631844280&t=b89bd8a6d5ec115436f9ae96c53511f4',
          name: '王小虎',
          noticeTitle: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02',
          checkBtn:'查看详情',
        },
        {
          // photo:'iVBORw0KGgoAAAANSUhEUgAAAEAAAAA8CAMAAADhV0xWAAADAFBMVEX+/v4AAAD9/f36+/r19vXu7/D8/PwzO2g2P3FBSXIbKn/q6uqaprgaI2deaJe9u790e5Npc5wiLGr////+/v4dLYn////+/v7+/v79/f25rrUjLF7l5OIlNqQaIVlla4ji3d2wudnP1NyJlcEUG1AiMYRNVn3+/v64uszF0+b+/v4sNWNRYZciL3i0t8DV1NqSkaOtqLmxrcVWY57c2du/vs7l6u5QVnhKWIW2tq5VWoq7xd/AyNyin71ZX4E9SYiXmqtgcKvZysccIUjhz88iMZYrMmuAgqDIy9DZ1NAtMlGRoMJaZI8iMowsOYyclZw2QHqjtM1faH4sOnTS3OSPhIexrKWnr9bg4+hSYoOqn6fEvsGFjqYRF0XDxM48R3p9j7cQFDswQ8o6QFwkK1ShqMVue6B4bnlVZbEyQJNFUX6ck5TG0NU1QoShl6TPyMsLDSKgmos7TKr///85TLj+/v6hm6zPy8EfM61XZ8dscYQhJj47R3CrqJp6h52PiZgwRKBKUWystsxNUVxnc4vN2ezHycItNlw/RGaSmLRdbIunrr9IU3Znbp6Jlqptb5D9/f2loq9fcbtGR1lcZGfUnp9pesc8QkxGVK9JWJgNEi0vQq2DjtPDuriGgIuUkId2fa0nObE2TsJ/dYleZ6GYh5A3N0Teen1PXax0hMpvaWOtpMJ1g6ORjLbeUFPV3u2DenHHwrqHhXkkOL9/lMx6h6/fHidpdrBzgb1mZnJMXcqLnM6WmMWPnbFKXLYrQbqdqdG9GxsXHFK0FReantdBVtI9TJy5sZ7Awq5ictPXjpDrvb6uq6tLS02Ahrt9j6iowMcQHFgrQcrQrq8lM3ogMZVJWpbQFhrChYWJktzvsrPJXmCRmL4kKWeDiqQfIDK/KS7lQUd+gtiDmJhohptPV4fL0dMiPb4mNnS3TE3Pz8/m6eg+RnF4h6fhKjURH2OkloFQYN9ieMtYYIcYLJwdL6oYHGRfZo/jZWgYIGgYMI/qp6jIChAaKXjJW14XHVZT0157AAABAHRSTlP/AP////9L/////v//////////EXn/IML1qP/////////////////K//+0////////////////////////////////////////////////////////////////////////////////////////////////ZP/k//////////////////////////////////+X/////////////////////////////////////////////////////////////////xP////////////////8/7W6/xSgwv//////scb/////////ZJdLyv8QucKX/0v/IHUgS8J1S/8gIP//ZP/KOWvPXQAAB/1JREFUeJyll3dUWnkWxxl8CAgC1iigAopKFLAgKih2REXFXrD3bmLsvSWxO7bYNRpNNGomzRgTJ5pNm7SZTJ85O5Op23dns73M7uw+RB3fA2dyztzDn7/vh/vu/d3yQ7zyE+0AgJ6mvrFVmRFi24zKrIz1NfVeHmCof0iphNohfcOXAmgeVqdW2mHNHwVoqv3zfW7AEVCAofEPyxVmDP0QCODYTtR+2IyOHQR49WXkCntVLUAPEjykBmhI0BDgT8UOf5/TPYCe1f4TgPejjz4a8gUAFAByVAlWe4RdAEz/+MLtO7cvPAZQDImEi8PhADhlj7ALgPrv+88vrn2zre+JQzvX95r1MVAwxGEoABo/4Ny1D29f8AVQBSQKO8QjIq/VGVuOA6CEnUgqAceg/uG++M+d72gAv4Ckq20qnsvKsxFLEzyJgAbklDKb2wBDWP5p39z5jeL/E7pMZd3hApdRQjcBq9tGhvpgtH2jtgHw++d97fN3UfykVg+dZf/wwLam8C4bioWFRZcEGgfjXYAmTI9898OfU1GScAvZsqVPzWc1gYE+qakWutLudiqUoKgLBQBeP8ihz4f4BWY+qWiBaaJPzZEjR8YysJaEOY9aEgoCOKQEwB1AIB9958sg+aCdCaLURFnGWM1n6ZZmUixFWxsjgWYCdAEEqNS/xrlzuM70dE+8I0Em6kCjM9pEgjwMxccnea4TmgjwMiBeMYTrQcAQjtM6kK5b2G0rQwc2oTss0SfRGJml/2onAD1qCAL0VQDIR9/S1n0SU8fQAm1tdgS6tjYZg7YknNaRutTDAPogQLUFIYe+pQ6CkUvENI3VoGViDBbrotOtQ5CJdeuhnwCGEaGnokcgvR9TpRapY0fSnWtaqtuwzssEHR1CrTiDUtgDA4BylRyAMcDhInW0tU0T083C1weHB8yyCB1YdEYGhqDDgZe2JkI1BAiwC0TiI3TRYoFZy/Dw2bPhzrW1JwNPOvc+7+HBAfoINW1UAxUbS2yjtGG7w88+bRl42tIy0CaVduj06njCKhK8zghII9mJAQAA0cOBpJUV0tPzl9fPX7z8VYJnu+fzajNYMYBmhShTBSickK9Xcxw2VqVZr2fPk+UcfLtnQ2hoA1WlQZYh1HdyJDW0uvp8Q7v/9dXs/HhXV1Bu11duDy0FhR00CJDUqcHB9dDQi1F2U1Evok+4PiGTrZsZ6vrrAQDc9OB6dlH8iweu+VF1lyoqiouLJUlJ6gAH+AA8mSI6xTg8qTgxXyQPCOBxeVwnTrEqwOiAICI0Yjnl/ltODC5xftKbJuHxfIuJHJzqkClTl0blZKK92d1JPkFcyidfesPV29u3WM4DRxX8nJW6i6QkoIrM3JfsKy7V5R+te8Pbl8bjw+tAYcbqrvLOR/CITkRXHk0e/aAigIoCVIbTtumrK6ZdF9yEbhIajZEk51Jx4IxUm0JNdeW8o+/sXSIS5cR4or21pNiXCmslO6anrqEo64HT1FQUerHuSSiZHD85KQ9QqSOFgQ1FTUtT5ADFsBue6os6/+JBfHTFg0uTchp8um6boqWpNFWkBsBn4FtFgdnxDdNHK8iTPFpAsRMjkq+Io2Ll2GeKpgpr60ikRqR1VqvzyQyfgSJ7cjQxfpKHwyV1Zlq7sRixfAXj+8PbbR0yWEA5ik9fDnHpQlMyBorioy5nZ+eXE6lJdqQEPN3a2jqSvz8fysGyF0bQdxQqFvynhEJbFwwG49xXdPFyVNTR6boA7vOsHnwzvrPz2bNnBdzdvWdntO26gNTgC+lC4Wm3SDuKpYvHqIegvDwqv2F+evpoNNF/OSwoiFRP+uqtr7/uSChQRnR3uCrGO+g7ELm4FsNyW22mr4nj8pKzevzd3fvkTg5kV1dXThg+LCiltVXU2hEe55LnUs8AP2RvvG8vGBq4MPNbp4SRkRsbXrkhjjLdZEv/Ai4Nh4rlSpxigsxPC+LiRCLLrq4uLBodETHaDOxbMMAVB0ldcex57nacdTxmjqnFdCxhRiT3OtiHkmk4Lsfd/PRcMqYW2ySyxGJrMWIKxVQ3j7tvxQGXLADv4RiWKYzZuBuzWGritzAyOzvi5VB+Zt7evq/hzJlegkeuh21WuwBtYyMWU3TFya2/hK55v5NG2OLDWEKWMObW+Phsv4wdUvKQvmRXtFTeMHWmVzDn5XXqaoq5i40NhWKTR8JnfgLbE3/7QbAtvpn12nH63RtpmzM594O1mLmZDg5ObmAkV9a8VlPMzRdzFu4XYkX++PYs7Kc/g6+67/3a9vUY1mus5uulm5uz/SUmJibjQXQna/qSw1JmSsr1qzmjHvcds9q3JmzRFNP/7er3LdvvfdBDF7KO03O1ghtLFYCZ2Zsfm6+4bziY9/ffGvW6JV0Outk/0jhuYqD99p4esu7/wXxLyApiahkYBDs2msxs3ru5eOrLuxMf32gsWVgL2rq+cD+Ercs2CPZ7f58I8uD4xVv0ZnwIUwtMY66Bn0mpedWNh1erbuSsTUycWsjJZbKZBgYGWlr/3a+BPnn+8gkJ3G5BwFxusJ9fY4pX/82tqxNfVt1L2xwfGfHz8zPQMnj/3xAJ/NH1j9+DK6kpm1DIZgbnpgSlvLlYVVI6U3nlSlpa1bhJZeXf/goTqD77/vg2SBDZmIL7laNjCLOQGRziV1k5cyXt3sO0d36lclzdw/Nff/9UQElMTLQAIdoRbC02GwxI5ZV3/vwnNYf/DwokL0uvRy+kAAAAAElFTkSuQmCC',
          photo:'http://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-b6eae3250bb62fadb3d2527f466cf033_b.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631844280&t=b89bd8a6d5ec115436f9ae96c53511f4',
          name: '王小虎',
          noticeTitle: '上海市普陀区金沙江路 1518 弄',
          date: '2016-05-02',
          checkBtn:'查看详情',
        },
      ]
    };
  },
  created(){
    this.getNoticeData()
    // this.tableData.forEach(element => {
    //     element.photo = 'data:image/jpg;base64,' + element.photo
    // })
    var param={'uid':sessionStorage.getItem('uid'),'readed':'0','start':this.currentPage,'limit':this.pageSize}
    getNotice(param).then(res=>{
      const { result, msg, data, id, account } = res;
      if (result === "ok") {
        this.randOptions.forEach(element => {
            if(element.count!==undefined){
              element.count=account
            }
        })
      }
    })
  },
  methods: {
      // 点击消息页面的导航
      change(item,index) {
        this.number= index;    //重要处
        this.messageTag=item.name
        if(item.name==='未读消息'){
          this.readed='0'
        }else if(item.name==='全部消息'){
          this.readed='all'
        }else{
          this.readed='1'
        }
        this.getNoticeData()
      } ,
      // 获取消息数据
      getNoticeData(){
        var param={'uid':sessionStorage.getItem('uid'),'readed':this.readed,'start':this.currentPage,'limit':this.pageSize}
        getNotice(param).then(res=>{
          const { result, msg, data, id, account } = res;
          if (result == "ok") {
            this.totalNum=account
            this.tableData=data
              for(let i of this.tableData){
                if(i.USERPHOTO.indexOf("?groupValue=admin")===-1){

                  i.havePhoto=false
                }else{
                  i.USERPHOTO= window.portalPath+ '/r'+i.USERPHOTO.slice(1).replace('&sid=null','&sid='+sessionStorage.getItem('sid'))
                  i.havePhoto=true
                }
                i.CREATETIME=i.CREATETIME.split('.')[0]
              }
            }
        })
      },
      // 点击导航选中项
      changeNoticeType(item,index) {
        this.selectType= index;    //重要处
      } ,
      // 分页-每页显示多少条
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      // 分页-当前页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val
        this.getNoticeData()
      },
      // 点击全部已读
      allReadState(){
        this.randOptions.forEach(element => {
            if(element.count!==undefined){
              if(element.count===0){
                 this.$alert('暂无未读消息！');
              }else{
                this.$confirm('确认是否全部已读？', {
                  distinguishCancelAndClose: true,
                  confirmButtonText: '是',
                  cancelButtonText: '否'
                })
                  .then(() => {
                    var param={'sid':sessionStorage.getItem('sid')}
                    readAllMessage(param).then(res=>{
                      const { result, msg, id } = res;
                      if(result==='ok'){
                        // this.getNoticeData()
                        var param={'uid':sessionStorage.getItem('uid'),'readed':'0','start':this.currentPage,'limit':this.pageSize}
                        getNotice(param).then(res=>{
                          const { result, msg, data, id, account } = res;
                          if (result === "ok") {
                            this.randOptions.forEach(element => {
                                if(element.count!==undefined){
                                  element.count=account
                                }
                                this.totalNum=account
                                this.tableData=data
                                for(let i of this.tableData){
                                  if(i.USERPHOTO.indexOf("?groupValue=admin")===-1){

                                    i.havePhoto=false
                                  }else{
                                    i.USERPHOTO= window.portalPath+ '/r'+i.USERPHOTO.slice(1).replace('&sid=null','&sid='+sessionStorage.getItem('sid'))
                                    i.havePhoto=true
                                  }
                                  i.CREATETIME=i.CREATETIME.split('.')[0]
                                }
                            })
                          }
                        })
                      }
                    })
                  })
                  
              }
            }
        })
          // var param={'sid':sessionStorage.getItem('sid')}
          // readAllMessage(param).then(res=>{
          //   const { result, msg, id } = res;
          //   if(result==='ok'){
          //     this.getNoticeData()
          //   }
          // })
      },
      // 点击搜索
      searchNotice(){
        var param={'uid':sessionStorage.getItem('uid'),'readed':this.readed,'start':this.currentPage,'limit':this.pageSize,'query':this.input}
        getNotice(param).then(res=>{
          const { result, msg, data, id, account } = res;
          if (result == "ok") {
            this.totalNum=account
            this.tableData=data
              for(let i of this.tableData){
                if(i.USERPHOTO.indexOf("?groupValue=admin")===-1){

                  i.havePhoto=false
                }else{
                  i.USERPHOTO= window.portalPath+ '/r'+i.USERPHOTO.slice(1).replace('&sid=null','&sid='+sessionStorage.getItem('sid'))
                  i.havePhoto=true
                }
              }
            }
        })
      },
      // 点击查看详情
      noticeDetail(item){
        if(item.URL){
          window.open( window.portalPath+ '/r'+item.URL.slice(1)+'&sid='+sessionStorage.getItem('sid'),"_blank")
        }
      }
    },
  components: {},
};
</script>

<style lang="scss">
.isUnread{
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #666666;
}
.notice-box{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height:100%;
}
.notice-nav{
  width: 180px;
  overflow: hidden;
  height:100%;
}
.notice-con-box{
  flex: 1;
  height:100%;
  padding: 0px 16px;
}
.notice-nav-title{
    font-weight: bold;
    text-indent: 20px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: #D9DEE4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.notice-nav-list{
  width: 100%;
  height:calc(100% - 70px);
  background: #EAEDF1;
}
.notice-nav-list li{
  width:100%;
  height:40px;
  font-size: 12px;
  line-height: 40px;
  padding-left:30px;
  padding-right: 10px;
  box-sizing: border-box;
}
.notice-nav-list li.active{
  background: #ffffff;
}
.notice-nav-list li.unread{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.unread-count{
  display: block;
  padding: 0px 8px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #FFF;
  background: #09C;
  border-radius: 2px;
}
.notice-nav-list li:hover{
  background: #F4F6F8;
  cursor: pointer;
}
.notice-con-title-box{
  padding: 16px 0px;
  border-bottom: 1px solid #DDD;
  font-size: 12px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.isUnreadStyle{
  justify-content: flex-start;
}
.notice-con-title{
  text-indent: 8px;
  border-left: 2px solid #88B7E0;
}
.isUnreadSearchStyle{
  margin-left: 35.5%;
}
.notice-con-titBtn{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #3A62D7;
}
.notice-con-type{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}
.notice-con-type li{
  margin-right: 2px;
  padding: 6px 12px;
  border-radius: 0px;
  border: 1px solid #D9DEE4;
  background-color: #D9DEE4;
  color: #666;
  line-height: 20px;
  height: 32px;
  box-sizing: border-box;
  font-size: 12px;
}
.notice-con-type li.active1{
  border: 1px solid #546478;
  background-color: #546478;
  color: #FFFFFF;
}
.notice-con-list{
  width:100%;
  font-size: 14px;
}
.notice-con-list tr{
  border:1px solid #E1E6EB;
  padding: 8px 8px;
}
.notice-con-list th{
  
  font-weight: normal;
  color: #999;
  background-color: #F5F6FA;
}
.notice-con-list td{
  padding:10px 0px;
  cursor: pointer;
}
.fenye{
    position: fixed;
    bottom: 1px;
    left: 30%;
}
</style>